<template>
	<view class="main">
		<view class="nav-bar">
			<view :style="{ height: statusBarHeight }" class="status-bar"></view>
			<view class="tab-bar">
				<view @tap="toBack" class="iconfont icon-zuojiantou"></view>
				<view @tap="toBlock" class="iconfont icon-RectangleCopy"></view>
			</view>
		</view>

		<!-- 背景轮播部分 -->
		<user-swiper v-if="userInfo.userHeadUrl" :userInfo="userInfo"></user-swiper>

		<!-- 相册展示 -->
		<view class="user-album">
			<view class="user-album-title">
				<view class="icon iconfont icon-zhaopian">她的相册</view>
				<view class="">解锁她的相册(2元) 会员免费</view>
			</view>
			<view class="user-album-imgs">
				<!-- 阅后即焚 -->
				<!-- 同一个组件中最好不要出现相同的变量名 -->
				<template v-if="userInfo.album && userInfo.album.flash.length">
					<block v-if="n < 3" v-for="(iten, n) in userInfo.album.flash" :key="'flash' + n">
						<user-album-item :userId="userInfo.userId" :imgUrl="iten.imgUrl" type="flash" :isRead="iten.isRead"></user-album-item>
					</block>
				</template>

				<!-- 私密相册 -->
				<template v-if="userInfo.album && userInfo.album.reward.length">
					<block v-if="idx < 3" v-for="(item, idx) in userInfo.album.reward" :key="'reward' + idx">
						<user-album-item @reward="reward" :imgId="item.imgId" :userId="userInfo.userId" :imgUrl="item.imgUrl" type="reward" :isRead="item.isRead"></user-album-item>
					</block>
				</template>

				<view v-if="userInfo.album && (userInfo.album.reward.length || userInfo.album.flash.length)" class="album-img-more">
					<view class="icon iconfont icon-gengduo">查看更多</view>
				</view>

				<view v-else class="album-img-nothing">
					<text>此用户还未上传任何图片</text>
					<image src="../../static/loding/onthing.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 用户动态 -->
		<view class="user-trends">
			<view class="user-trend-title">
				<view class="icon iconfont icon-xihuan">她的广场</view>
				<view class="">最美的她等你来发现</view>
			</view>
			<view class="user-trend-body">
				<!-- 广场详情 -->
				<view class="trend-list-info">
					<block v-for="(trend, _index) in trendList" :key="_index"><trend-info :toGo="false" :index="_index" :trend="trend" @thumbsUp="thumbsUp"></trend-info></block>
				</view>

				<view v-if="trendList.length < 1" class="trend-nothing">
					<text>此用户没有任何动态</text>
					<image src="../../static/loding/onthing.png" mode="widthFix"></image>
				</view>
				<!-- 加载更多 -->
				<load-more v-else :loadText="loadText" :loading="false"></load-more>
			</view>
		</view>

		<user-tar-bar @consume="consume" :folloStat="userInfo.followStatus"></user-tar-bar>

		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog
				:type="popupInfo.type"
				:title="popupInfo.title"
				:content="popupInfo.content"
				:before-close="true"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import userSwiper from '../../components/user-info/user-swiper.vue';
import userAlbumItem from '../../components/user-info/user-album-item.vue';
import userTarBar from '../../components/user-info/user-tar-bar.vue';
import loadMore from '../../components/common/load-more.vue';
import trendInfo from '../../components/common/trend-info.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import MessageUser from '../..//utils/MessageUser.js';
export default {
	components: {
		userSwiper,
		userAlbumItem,
		loadMore,
		trendInfo,
		userTarBar,
		uniPopup,
		uniPopupDialog
	},
	data() {
		return {
			loadText: '上拉加载更多',
			userInfo: {},
			pageNo: 1,
			trendList: [],
			statusBarHeight: '',
			popupInfo: {}
		};
	},
	methods: {
		change(e) {
			this.info.current = e.detail.current;
		},
		loadMore() {
			if (this.loadText != '上拉加载更多') {
				return;
			}
			// 修改状态
			this.loadText = '加载中...';
			this.pageNo += 1;
			this.loadTrend();
		},
		loadTrend() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.userTrend,
				data: {
					userId: this.userId,
					pageNo: this.pageNo
				},
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.trendList.push(...res.data.data);
						if (res.data.data.length < 10) {
							this.loadText = '没有更多数啦!';
						} else {
							this.loadText = '上拉加载更多';
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					this.loadText = '上拉加载更多';
					console.log(r);
				}
			});
		},
		loadUserInfo() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.userInfo,
				data: {
					userId: this.userId
				},
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.userInfo = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		},
		thumbsUp(index) {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.thumbsUp,
				data: {
					trendId: this.trendList[index].id
				},
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (this.trendList[index].likesNum < res.data.data) {
							this.trendList[index].isLike = true;
						} else {
							this.trendList[index].isLike = false;
						}
						this.trendList[index].likesNum = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		},
		consume(type) {
			switch (type) {
				case 'follows':
					this.userFollow();
					break;
				case 'unlock':
					this.userConsume(1);
					break;
				case 'chat':
					this.userConsume(2);
					break;
			}
		},
		userFollow() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.userFollow,
				data: {
					followId: this.userInfo.id
				},
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (res.data.data) {
							this.userInfo.followStatus = false;
						} else {
							this.userInfo.followStatus = true;
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		},
		dialogConfirm(done) {
			this.$refs.popupDialog.close();
			if (this.popupInfo.type === 'warn') {
				this.blockUser();
			}

			// 需要执行 done 才能关闭对话框
			done();
		},
		dialogClose(done) {
			this.$refs.popupDialog.close();
			// 需要执行 done 才能关闭对话框
			done();
		},
		toBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		blockUser() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.block,
				data: {
					blockId: this.userInfo.id
				},
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.showToast({
							title: '当前用户已经被拉黑',
							icon: 'none',
							success() {
								uni.setStorageSync('user-info-block', 1);
								uni.navigateBack({
									delta: 1
								});
							}
						});
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		},
		toBlock() {
			this.popupInfo = {
				type: 'warn',
				title: '拉黑',
				content: '拉黑后无法查看此用户,你确定拉黑此用户吗?'
			};
			this.$refs.popupDialog.open();
		},
		userConsume(type, imgId) {
			let dataSet = {
				type: type,
				userId: this.userInfo.id
			};
			if (type === 3) {
				dataSet.albumId = imgId;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.userConsume,
				data: dataSet,
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (type === 1) {
							this.popupInfo = {
								type: 'info',
								title: '微信号',
								content: this.userInfo.wechatNo || res.data.data
							};
							this.$refs.popupDialog.open();
						} else {
							this.addUser(res.data.data);
						}
					} else if (res.data.code === constant.dataCode.COIN_ERROR) {
						showToast(res.data.msg);
						uni.navigateTo({
							url: '../wallet/wallet'
						});
					} else if (res.data.code === constant.dataCode.WECHAT_EMPTY) {
						this.userConsume(2);
					} else {
						showToast(res.data.msg);
					}
				},
				fail(r) {
					console.log(r);
				}
			});
		},
		addUser(id) {
			let userArr = uni.getStorageSync(constant.userFriend) || [];
			let use = uni.getStorageSync(constant.user);
			let index =
				userArr &&
				userArr.findIndex(user => {
					return user.userId === id;
				});

			let msu = null;
			if (index !== null && index > -1) {
				let messageUser = userArr[index];
				userArr.splice(index, 1);
				msu = messageUser;
				msu.updateTime = new Date().getTime();
			} else {
				msu = new MessageUser(
					this.userId,
					this.userInfo.accountNo || id,
					this.userInfo.userNickname,
					this.userInfo.userHeadUrl,
					false,
					'txt',
					'',
					new Date().getTime(),
					true,
					0
				);
			}

			userArr.unshift(msu);
			uni.setStorage({
				key: constant.userFriend,
				data: userArr
			});
			uni.navigateTo({
				url: `../chatroom/chatroom?user=${JSON.stringify(msu)}`
			});
		},
		reward(imgId) {
			this.userConsume(3, imgId);
		}
	},
	onLoad(options) {
		this.userId = options.userId;
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
		this.loadUserInfo();
		this.loadTrend();
	},
	// 触底刷新
	onReachBottom() {
		this.loadMore();
	}
};
</script>

<style lang="less" scoped>
.main {
	position: relative;
}
.trend-nothing {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text {
		color: #999999;
		font-size: 25rpx;
	}

	image {
		width: 140rpx;
	}
}

.user-album {
	position: relative;
	background: #f5f7fa;
	margin-top: -15rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding-bottom: 20rpx;
	z-index: 1;

	.user-album-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 40rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		& > view:first-child {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 700;
			color: #333333;
			font-size: 30rpx;
		}
		.icon-zhaopian:before {
			margin-right: 15rpx;
			font-size: 48rpx;
			font-weight: 700;
			color: #fc85a6;
		}

		& > view:last-child {
			color: #666666;
			font-size: 26rpx;
		}
	}

	.user-album-imgs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		background-color: #ffffff;
		padding: 0 40rpx 15rpx;

		.album-img-more {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 162rpx;
			height: 162rpx;
			border-radius: 20rpx;
			margin: 10rpx 5rpx;
			background: #e8e8e8;

			.icon-gengduo {
				text-align: center;
				position: absolute;
				top: 50%;
				left: 20rpx;
				transform: translateY(-50%);
				font-size: 24rpx;
				font-weight: 700;
				color: #f86090;
			}
			.icon-gengduo::before {
			}
		}

		.album-img-nothing {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text {
				color: #999999;
				font-size: 25rpx;
			}

			image {
				width: 140rpx;
			}
		}
	}
}
.user-trends {
	padding-bottom: 120rpx;
}
.user-trends {
	.user-trend-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 40rpx 15rpx;
		border-bottom: 1rpx solid #eeeeee;
		margin: 15rpx 0 25rpx 0;

		& > view:first-child {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 700;
			color: #333333;
			font-size: 30rpx;
		}
		.icon-xihuan:before {
			margin-right: 15rpx;
			font-size: 36rpx;
			font-weight: 700;
			color: #fc85a6;
		}

		& > view:last-child {
			color: #666666;
			font-size: 26rpx;
		}
	}
}

.nav-bar {
	position: absolute;
	width: 100%;
	background-color: transparent;
	z-index: 99;

	.status-bar {
		width: 100%;
		height: 20px;
	}

	.tab-bar {
		width: 100%;
		height: 44px;
		background-color: transparent;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.iconfont {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0 40rpx;
			font-size: 36rpx;
			border-radius: 50%;
			text-align: center;
			background: rgba(0, 0, 0, 0.3);
			color: #eeeeee;
		}
		.icon-RectangleCopy::before {
			font-size: 43rpx;
			font-weight: 500;
		}
	}
}
</style>
